import React from 'react'

const Index = () => {
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 定义状态
    const [finished, setFinished] = React.useState(false)

    // 定义ref
    const listRef = React.useRef(null)

    // 定义存放数据的数组
    const [list, setList] = React.useState([])

    // 获取登录信息
    let loginAuth = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}

    const [LoginAuth, setLoginAuth] = React.useState(loginAuth)

    // 定义分页
    // const [page,setPage] = React.useState(1)
    let page = React.useRef(1)

    // 定义订单状态
    const [status, setStatus] = React.useState(0)

    // 上拉加载的事件
    const load = () => {
        getOrderData()
    }

    let OrderData = React.useRef([])

    // 请求数据
    const getOrderData = async () => {
        setFinished(true)
        let data = {
            busid: LoginAuth.id,
            // page:page,
            page: page.current,
            status: status
        }

        let result = await React.$Api.OrderIndex(data)

        if (result) {
            if (result.code === 1) {

                OrderData.current = OrderData.current.concat(result.data)

                setList(OrderData.current)

                page.current = 1 + page.current

                setFinished(false)
            } else {
                React.$Vant.Toast.info(result.msg)
                setFinished(true)
                return false
            }
        }

    }

    // 下拉刷新的事件
    const refresh = () => {
        OrderData.current = []
        setList([])
        // setPage(1)
        page.current = 1
        setFinished(false)
        return new Promise((resolve) => {
            setTimeout(() => {
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000)
        })
    }

    React.useEffect(() => {
        OrderData.current = []
        page.current = 1
        setList([])
        getOrderData()
    }, [status])

    const onBack = () => {
        navigate(-1)
    }

    // 显示列表数据的组件
    const Items = () => {
        if (list.length > 0) {
            return list.map((item, key) => {
                if (item.status == 3 || item.status == 4) {
                    return (
                        <li key={key}>
                            <div className="vip_order_goods">
                                <h3>
                                    <i><img src={item.product.cover_cdn} /></i>
                                    <dl>
                                        <dt>{item.product.name}</dt>
                                        <dd>
                                            <em>押金</em>
                                            <em>{item.rent}</em>
                                        </dd>
                                        <dd>
                                            <em>总价</em>
                                            <em>{item.price}</em>
                                        </dd>
                                        <dd>
                                            <em>结束时间</em>
                                            <em>{item.endtime_text}</em>
                                        </dd>
                                        <dd>
                                            <em>订单状态</em>
                                            <em>{item.status_text}</em>
                                        </dd>
                                    </dl>
                                </h3>
                            </div>

                            <div className="order_btn">
                                <React.$Vant.Button round type="danger" size="small" onClick={() => navigate(`/order/order/recovery?id=${item.id}`)}>立即归还</React.$Vant.Button>
                            </div>
                        </li>
                    )
                }
            })
        } else {
            return <React.$Vant.Empty image="search" description="暂无需要归还的商品" />;
        }

    }

    return (
        <>
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='我要归还'
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            {/* 列表 */}
            <React.$Vant.PullRefresh onRefresh={refresh} onRefreshEnd={() => listRef.current?.check()}>
                <React.$Vant.List className="vip_user_order" ref={listRef} onLoad={load} finished={finished}>
                    <ul>
                        {Items()}
                    </ul>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>
        </>
    )
}

export default Index